<html>

<head>
    <title>电子表</title>
    <meta charset="utf-8">

    <style>
        body {
            background-color: black;

            text-align: center;
            /*设置文本对其方式（居中，居左，居右）*/
        }

        h1 {

            color: #ff99ff;
            /*设置文本颜色*/
            font-size: 160px;
            /*设置字体大小*/
            font-weight: normal;
            /*设置文体粗细范围100-700*/
            margin: 0;
            /*设置外间距*/
            margin-top: 250px;
            /*上外间距*/
        }

        p {
            color: #99ffcc;

            margin: 0;
            /*设置外间距*/
        }
    </style>

    <head>

        <body>
            <h1 id="time">14:22:34</h1>
            <p id="date">2017年6月8日 星期三</p>

            <body>
                <script>
                    // document.write("你好");
                    // alert("你好");

                    var t = document.getElementById("time");// 通过id属性，获得h1标签

                    var d = document.getElementById("date");
                    setInterval(function () {  // 定时器函数，每隔一段时间就执行一次代码

                        var now = new Date(); // 获得当前时间，得到是一个日期时间
                        var h = now.getHours();//    从当前时间汇总抽出小时
                        var m = now.getMinutes(); //    从当前时间汇总抽出分
                        var s = now.getSeconds();//    从当前时间汇总抽出秒
                        s = s < 10 ? "0" + s : s;
                        m = m < 10 ? "0" + m : m;
                        t.textContent = h + ":" + m + ":" + s;// 将时分秒进行拼接，然后赋值给h1标签
                        //-------------


                        var y = now.getFullYear();
                        var mon = now.getMonth() + 1;
                        var da = now.getDate();
                        var week = now.getDay();
                        week = nemberToZh(week);
                        d.textContent = y + "年" + mon + "月" + da + "日,星期" + week;
                    }, 1000);

                    function numberToZh(n) {
                        switch (n) {
                            case 0:
                                return "日"
                                break;
                            case 1:
                                return "一"
                                break;
                            case 2:
                                return "二"
                                break;
                            case 3:
                                return "三"
                                break;
                            case 4:
                                return "四"
                                break;
                            case 5:
                                return "五"
                                break;
                            case 6:
                                return "六"
                                break;
                            default:
                                break;


                        }
                    }
                </script>
                <html>